<template>
  <div class="commentFormIndex">
    <userHeader />
    <div class="breadClum">
      <span>
          <router-link :to="{path:'/pageIndex'}">  <a class="bread1">当前位置：首页  >  </a> </router-link>
         <router-link :to="{path:'/query'}">   <a class="bread2">综合查询  ></a> </router-link>
         <a class="bread2">评价点查询</a>
      </span>
    </div>
    <div class="navList">
      <el-dropdown  trigger="click" @command="setCompanySelect" style="cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;text-align: center;">
          <span class="el-dropdown-link">
            {{companySelect}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown" style="padding: 0 10px;height: 300px;overflow-y: scroll">
          <el-dropdown-item v-for="item in companyList" :key="item.company_id" :command="item">{{item.company_name}}
          </el-dropdown-item>
          <el-dropdown-item  v-if="companyList.length==0" command="none">
            暂无数据
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown  trigger="click" @command="setEvaluationPeriod" style="margin-right: 6px;cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;text-align: center;" >
          <span class="el-dropdown-link">
            {{evaluationPeriodSelect}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown" style="padding: 0 10px;height: 300px;overflow-y: scroll">
          <el-dropdown-item v-for="item in evaluationPeriodList" :command="item.evaluation_period"
                            :key="item.evaluation_period">{{item.evaluation_period}}年
          </el-dropdown-item>
          <el-dropdown-item  v-if="evaluationPeriodList.length==0" command="none">
            暂无数据
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!--评价类型-->
      <el-dropdown trigger="click" style="cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;text-align: center;"
                   @command="handleCommentType">
          <span class="el-dropdown-link">
            {{commentType}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown" style="padding: 0 10px;height: 300px;overflow-y: scroll">
          <el-dropdown-item  v-for="item in evaluationType" :command="item"
                            :key="item.evaplan_type_id">{{item.evaplan_type_name}}</el-dropdown-item>
          <el-dropdown-item  v-if="evaluationType.length==0" command="noCommentType">
            暂无数据
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!--评价流程-->
      <el-dropdown trigger="click" style="cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;text-align: center;"
                   @command="handleCommentProgress">
          <span class="el-dropdown-link">
            {{commentProgress}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown" style="padding: 0 10px;height: 300px;overflow-y: scroll">
          <el-dropdown-item :command="item" v-for="item in commentProgressArray" :key="item.process_id">{{item.process_name}}</el-dropdown-item>
          <el-dropdown-item  v-if="commentProgressArray.length==0" command="noCommentType">
            暂无数据
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button @click="downLoadFile" :loading="downloadLoading" class="download-file" style="" type="primary" icon="el-icon-download" size="mini"></el-button>
    </div>
    <el-table
      :data="tableData"
      v-loading="loading"
      :height="height"
      width="100%"
      stripe>
      <el-table-column
        prop="numrow"
        label="编号"
      >
      </el-table-column>
      <el-table-column
        prop="control_title"
        label="评价点名称"
      >
      </el-table-column>
      <el-table-column
        prop="evaluation_criterion"
        label="评价标准"
      >
      </el-table-column>
      <el-table-column
        label="设计评价"
      >
            <el-table-column
              label="制度规定内容"
            >
              <template slot-scope="scope">
                <div >
                  <div class="mend_principal_scope" v-if="scope.row.system_content.length>0">
                    <div v-for="(item,index) in scope.row.system_content"  class="mend_principal_cell" >
                      {{scope.row.system_content[index].name}}:{{scope.row.system_content[index].content}}
                    </div>
                  </div>
                </div>
              </template>

            </el-table-column>
            <el-table-column
              prop="design_defect_title"
              label="评价结论"
            >
          </el-table-column>
      </el-table-column>
      <el-table-column
        label="执行评价"
      >
          <el-table-column
            label="检查方法"
            prop="inspection_method"
          >
          </el-table-column>
        <el-table-column
          label="控制证据"
          prop="control_evidence"
        >
        </el-table-column>
          <el-table-column
            label="评价结论"
            prop="execute_defect_title"
          >
          </el-table-column>
      </el-table-column>
        <el-table-column
          label="评分"

        >
          <el-table-column
            label="标准分值"
            prop="standard_score"
          >
          </el-table-column>
          <el-table-column
            label="评价分值"
            prop="evaluation_score"
          >
          </el-table-column>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-count=pageSize
      layout="total,prev, pager, next, jumper"
      :current-page.sync="currentPage"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>
<script>
  import userHeader from '@/components/header.vue';
  import {mapState} from 'vuex';
  export default({
    data(){
        return {
          companySelect:'评价企业',
          commentCompany:"评价企业",
          evaluationPeriodSelect: '评价期间',
          commentPeriod:'',//评价期间的时间段
          isShowCommentPeriod:false,//评价期间  时间选择
          commentType:"评价类型",
          commentProgress:"评价流程",

          page:1,
          pageSize:1,
          currentPage:1,
          downloadLoading:false,
          companyList: [],
          evaluationPeriodList: [],
          evaluationType:[],
          tableData:[],
          commentProgressArray:[],
          loading:true,
          companySelectId:'',
          EvaluationPeriodId:'',
          commentTypeId:'',
          processId:'',
          commentTableData:[
            {
              ID:'1001'
            }
          ]
        }
    },
    components:{
      userHeader,
    },
    computed: {
      ...mapState({
        height:state=>sessionStorage.getItem('height')||state.app.height,
      }),
    },
    methods:{
      //获取公司列表
      getCompanyList() {
        this.axios.get('/api/v1/enquiry/companyflat')
          .then((res) => {
            var companyList = [];
            if (res.data.code == 0) {
              console.log((res.data.data))
              this.companyList = this.formatSonCompany(res.data.data);

              console.log(this.companyList)
            }
          })
      },
      //将公司列表树状结构转化为数组
      formatSonCompany(data) {
        var temp = [], list = [];

        function copySonCompany(obj) {
          temp = [...temp, obj]
          if (obj.son_company.length > 0) {
            obj.son_company.forEach(element => {
              copySonCompany(element)
            })
          }
          return temp
        }

        data.forEach(el => {
          list = [...list, ...copySonCompany(el)]
        })
        return list
      },
      //选择公司
//      setCompanySelect(command) {
//        if(command=='none'){
//          return false
//        };
//        this.companySelect = command.company_name;
//        this.companySelectId = command.company_id;
//        this.initData(this.page,this.companySelectId,this.EvaluationPeriodId,this.commentTypeId,this.processId);
//        this.getCompanyEvaluationPeriod(command.company_id).then(res => {
//          console.log(res.data.data)
//          if (res.data.code == 0) {
//            this.evaluationPeriodList = res.data.data
//          }
//        })
//      },
      //选择公司
      setCompanySelect(command) {
        if(command=='none'){
          return false
        };
        this.companySelect = command.company_name;
        this.companySelectId = command.company_id;
        this.commentProgressArray=[];
        this.evaluationPeriodSelect='评价期间';
        this.commentType='评价类型';
        this.commentProgress='评价流程';
        this.commentTypeId='';
        this.EvaluationPeriodId='';
        this.initData(this.page,this.companySelectId,this.EvaluationPeriodId,this.commentTypeId,this.processId);
        this.loading =true;
        this.getCompanyEvaluationPeriod(command.company_id).then(res => {
          console.log(res.data.data)
          if (res.data.code == 0) {
            this.evaluationPeriodList = res.data.data
          }
        });
        //获取评价类型
        this.axios.get('/api/v1/enquiry/evaplantypequery',{
          params:{
            company_id:this.companySelectId,
          }
        }).then((res)=>{
          if(res.data.code==0){
            this.evaluationType =res.data.data;
          }
        })
      },
      //选择期间
      setEvaluationPeriod(command) {
      if(command=='none'){
          return false
      };
        this.evaluationPeriodSelect = command;
        this.EvaluationPeriodId =command;
        this.commentTypeId='';
        this.commentType='评价类型';
        this.commentProgress='评价流程';
        this.loading= true;
        this.initData(this.page,this.companySelectId,this.EvaluationPeriodId,this.commentTypeId,this.processId);
          this.axios.get('/api/v1/enquiry/evaplantypequery',{
              params:{
                company_id:this.companySelectId,
                evaluation_period:this.evaluationPeriodSelect
              }
          }).then((res)=>{
              if(res.data.code==0){
                  this.evaluationType =res.data.data;
              }
          })
      },
      downLoadFile(){
        if(this.tableData.length>0){
          this.downloadLoading = true
          import('../utils/export2Excel').then(excel => {
            const filterVal = ['numrow', 'control_title', 'evaluation_criterion', 'system_content','design_defect_title','inspection_method','control_evidence',
              'execute_defect_title','standard_score','evaluation_score']
            const tHeader = ['编号', '评价点名称', '评价标准', '制度规定内容','评价结论','检查方法','控制证据','评价结论','标准分值','评价分值']
            //此处为 合计的数据
            const list = [...this.tableData]
            const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data:data,
              filename:"缺陷统计表（第"+this.page+"页）",
              autoWidth: true,
              bookType: "xlsx"
            })
            this.downloadLoading = false
          })
        }else {
          this.$alert("表格无数据，无法下载","提示")
        }
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      //评价类型选择
      handleCommentType(command){
        //一级流程列表
        if(command=='noCommentType'){
          return false
        };
        this.loading= true;
        this.commentTypeId=command.evaplan_type_id;
        this.commentType =command.evaplan_type_name;
        this.initData(this.page,this.companySelectId,this.EvaluationPeriodId,this.commentTypeId);
        this.initLcProgress(this.companySelectId,this.EvaluationPeriodId,this.commentTypeId)
      },

      //评价流程选择
      handleCommentProgress(command){
          if(command=='noCommentType'){
              return false
          };
          this.loading =true;
          this.processId=command.process_id;
          this.commentProgress =command.process_name;
         this.initData(this.page,this.companySelectId,this.EvaluationPeriodId,this.commentTypeId,this.processId);
      },
      initData(page,company_id='',evaluation_period='',evaplan_type_id='',process_id=''){
          this.axios.get('/api/v1/enquiry/evaluationpointquery',{
              params:{
                limit:10,
                page:this.page,
                company_id:company_id,
                evaluation_period:evaluation_period,
                evaplan_type_id,evaplan_type_id,
                process_id:process_id,
              }
          })
            .then((res)=>{
              console.log(res.data);
              if(res.data.code==0){
                  this.loading =false;
                  this.tableData=res.data.data;
                  this.total = res.data.pagination.total
                  this.pageSize =res.data.pagination.pages;
                  this.currentPage=parseInt(res.data.pagination.page)
              }
            })
      },
        initLcProgress(company_id,evaluation_period,evaplan_type_id){
        this.axios.get('/api/v1/enquiry/topprocess',{
            params:{
              company_id:this.companySelectId,
              evaluation_period:this.EvaluationPeriodId,
              evaplan_type_id:this.commentTypeId
            }
        })
          .then((res)=>{
            console.log(res.data);
            this.commentProgressArray =res.data.data;
          });
      },
      getCompanyEvaluationPeriod(company_id) {
        return this.axios.get('/api/v1/flow/controlindicators?company_id=' + company_id)
      },
      currentChange(val){
        this.page =val;
        this.loading =true;
        this.initData(this.page)
      },

    },
    mounted(){
        this.initData(this.page);
        this.getCompanyList();
//        this.initLcProgress()
    }
  })
</script>
<style scoped="">
  .commentFormIndex{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
  }
  .commentFormIndex .navList{
   padding-bottom:12px;
    margin-bottom:12px;
  }
  .commentFormIndex .navList .el-dropdown{
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*width: 60px;*/
    /*white-space: nowrap;*/

  }
  .commentFormIndex .navList .el-dropdown .el-dropdown-link{
    /*width: 60px;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*position: relative;*/
  }
  .commentFormIndex .navList .el-dropdown .el-dropdown-link .el-icon-arrow-down{
    /*position: absolute;*/
    /*right: 5px;*/
    /*top:50%;*/
  }
  .commentFormIndex .navList>div{
    background:none;
  }
  .commentFormIndex  .mend_principal_scope{
    margin-left: -15px;
    margin-right: -15px;
  }
  .commentFormIndex  .mend_principal_scope .mend_principal_cell{
    color: #606266;
    border-bottom: 1px solid #aac983;
    text-align: left;
    margin-left: 5px;
    margin-right: 5px;
  }
  .commentFormIndex  .mend_principal_scope .mend_principal_cell:last-child{
    border-bottom: 0;
  }
  .commentFormIndex .download-file {
    margin-right: 36px;
    margin-top: 14px;
    float: right;
    padding: 7px 8px;
    background: #769dd6;
    border: none;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
  }

  @media screen and (max-width: 1400px){
    .commentFormIndex{
      padding: 6px;
    }
  }
</style>
